
<style lang="less" scoped>
.modalTree {
  height: 500px !important;
  overflow: auto;
  padding-right: 10px;
}
</style>
<template>
  <div>
    <vxe-table border height="500" size="small" align="center"
      :tree-config="{ transform: true, rowField: 'Id', parentField: 'ParentId' }"
      :checkbox-config="{ labelField: 'Title', highlight: true, checkField: 'check',checkStrictly: true }" :data="tableData">

      <vxe-column type="seq" title="序号" width="100"></vxe-column>
      <vxe-column type="checkbox" field="Title" title="目录菜单" min-width="200" align="left" tree-node></vxe-column>
    </vxe-table>
    <div class="div-modal-footer">
      <Button type="primary" :loading="loading" @click="GrantRoleMenu">确定</Button>
    </div>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import {
  GetRoleMenu,
  GrantRoleMenu,
} from '@/api/rbac'
import {
  GetMenuList
} from '@/api/system'
export default {
  name: 'rolemenu',
  props: ['id'],
  data() {
    return {

      loading: false,
      loadingTable: false,
      tableData: [],
      tempMenuIds: [],
    }
  },
  computed: {},
  methods: {

    GetRoleMenu() {
      let vm = this
      GetRoleMenu(vm.id).then((res) => {
        if (res.StatusCode == 200) {
          vm.tempMenuIds = res.Data.map((item) => {
            return item.MenuId
          })
          vm.tableData.forEach(e => {
            if (vm.tempMenuIds.indexOf(e.Id) > -1) {
              e.check = true
            }
          });

        }
      })
    },
    GetMenuList() {
      let vm = this
      return GetMenuList().then((res) => {
        if (res.StatusCode == 200) {
          res.Data.forEach(e => {
            e.check = false
          });

          vm.tableData = res.Data
        } else {
          this.$Notice.error({
            title: data.Errors
          })
        }
        vm.GetRoleMenu()
      })
    },


    GrantRoleMenu() {
      let vm = this

      var roleMenuIdList= vm.tableData.filter(x=>x.check).map(x=>x.Id)

      var reqData = {
        Id: vm.id,
        MenuIds: roleMenuIdList
      }
      vm.loading = true
    
      GrantRoleMenu(reqData).then((res) => {
        vm.loading = false
        if (res.StatusCode == 200) {
          vm.modalMenu = false
          vm.$Message.success({ title: '提示', content: '操作成功' })
          vm.$emit('on-success')
        }
      })
    },



  },
  mounted() {
    this.tableHeight = window.innerHeight - 260
    this.GetMenuList()
  }
}
</script>

<style></style>
